<template>
  <div class="system-role-dialog-container">
    <el-dialog :title="state.dialog.title" @close="closeDialog" v-model="state.dialog.isShowDialog" width="869px">
      <div class="el-form-ls">
        <TreeFilterGlobal label="label" :data="treeFilterData" :default-value="defaultValue" @change="changeTreeFilter" />
        <div class="other-box">
          <TransferAll ref="TransferAllRef" style="height: 100%" />
        </div>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="onCancel" size="default">取 消</el-button>
          <el-button type="primary" @click="onSubmit" size="default">{{ state.dialog.submitTxt }}</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { reactive, ref } from "vue";
import { GetKeShiShenQingDanSel, GetZuHeXiangMuTongYongSel } from "@/api/modules/integratedProject";
import TreeFilterGlobal from "@/views/DataMaintenance/IntegratedProject/components/TagProject/components/components/index.vue";
import TransferAll from "@/views/DataMaintenance/IntegratedProject/components/TagProject/components/components/TransferAll.vue";
import { useGeneralProjectLs } from "@/stores/modules/generalProject";

// interface Option {
//   value: number;
//   desc: string;
//   disabled?: boolean;
// }

interface OriginalData {
  id: string;
  label: string;
  children?: OriginalData[];
}

interface TransformedData {
  strCode: string;
  strName: string;
  children?: TransformedData[];
}

// 定义子组件向父组件传值/事件
const emit = defineEmits(["refresh", "addOnSubmit"]);

// const rules = reactive({
//   describe: [{ required: true, message: "请填写疾病名称" }]
// });

const treeFilterData = ref<any>([]);
const TransferAllRef = ref<any>();

const transformData = (data: TransformedData[]): OriginalData[] => {
  if (!data || data.length === 0) {
    return [];
  }

  let arr: OriginalData[] = [];

  function recursiveTransform(item: TransformedData): OriginalData {
    let newItem: OriginalData = {
      id: item.strCode,
      label: item.strName
    };

    if (item.children && item.children.length > 0) {
      newItem.children = [];
      item.children.forEach(child => {
        newItem.children!.push(recursiveTransform(child));
      });
    }

    return newItem;
  }

  data.forEach(item => {
    arr.push(recursiveTransform(item));
  });

  return arr;
};

// 树形筛选切换
const changeTreeFilter = (val: string) => {
  GetZuHeXiangMuTongYongSel(val).then((res: any) => {
    let arrLs = [] as any;
    res.Data?.map((item: any) => {
      let obj = {
        label: item.ZuHeXiangMuMingCheng,
        key: item.ZuHeXiangMuID,
        ShenQingDanID: item.ShenQingDanID
      };
      arrLs.push(obj);
    });
    console.log(val, "val");
    useGeneralProjectLs().setTreeId(val);
    useGeneralProjectLs().setZuHeOption(arrLs);
  });
  // ElMessage.success("请注意查看请求参数变化 🤔");
  // proTable.value!.pageable.pageNum = 1;
  // initParam.departmentId = val;
};

// 定义变量内容
const state = reactive({
  ruleForm: {},
  dialog: {
    isShowDialog: false,
    type: "",
    title: "",
    submitTxt: ""
  }
});
const defaultValue = ref("");
const getKeShiShenQingDanSel = async () => {
  await GetKeShiShenQingDanSel().then((res: any) => {
    treeFilterData.value = transformData(res.Data);

    // defaultValue.value = treeFilterData.value[0].id;
    defaultValue.value = "";
  });
};

// 打开弹窗
const openDialog = async (type: string, row: any) => {
  await getKeShiShenQingDanSel();
  if (type === "edit") {
    state.ruleForm = row;
    state.dialog.title = "修改组合项目";
    state.dialog.submitTxt = "确 定";
  } else {
    state.dialog.title = "组合项目选择";
    state.dialog.submitTxt = "确 定";
  }
  state.dialog.isShowDialog = true;
};
// 关闭弹窗
const closeDialog = () => {
  state.dialog.isShowDialog = false;
  TransferAllRef.value.clearAllArr();
};
// 取消
const onCancel = () => {
  closeDialog();
};

// 提交
const onSubmit = () => {
  // let arrs = [] as any;
  // TransferAllRef.value.listRight.forEach((item: any) => {
  //   const obj = {
  //     strZuHeXiangMuId: item.key,
  //     strShiYongXingBie: "不限",
  //     strShiFouBiJian: "是"
  //   };
  //   arrs.push(obj);
  // });

  const data = {
    // strWeiHaiYinSuId: dataWeihu().sole,
    // strGangQi: dataWeihu().arbitrage,
    // listItem: arrs,
    // newArr: newArr.join(";"),
    //

    listRight: TransferAllRef.value.listRight
  };
  // console.log(data);
  // emit("hazardfactors", data);
  emit("addOnSubmit", data);
};

// 暴露变量
defineExpose({
  openDialog,
  closeDialog
});
</script>

<style scoped lang="scss">
.system-role-dialog-container {
  .el-form-ls {
    display: flex;
    height: 50vh;
    overflow: scroll;
    .el-form-new {
      height: 100%;
    }
  }
  :deep(.el-form-item) {
    margin-bottom: 0;
  }
}
.transfer-ls {
  height: 100%;
}
:deep(.el-transfer) {
  height: 100%;
}
:deep(.el-transfer-panel) {
  height: 100%;
}
:deep(.el-transfer-panel__body) {
  height: calc(100% - var(--el-transfer-filter-height) - 10px);
}
:deep(.el-transfer-panel__list) {
  height: calc(100% - var(--el-transfer-filter-height) - 30px);
}
.other-box {
  width: 100%;
  height: 100%;
}
</style>
